<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>有人智造-质检FQC看板</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
  <!--    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.esm.min.js"></script>-->
  <link rel="icon" href="/static/img/logo.png" type="image/x-icon"> <!-- 链接到favicon.ico文件 -->
</head>
<style>
  .body{
    width: 100%;
    height: 1500px;
    /*background-color: #f5f7fa;*/
    font-size: 20px;
    background: linear-gradient(to bottom right, blue, pink);
    background-image: url("/static/img/017d6a5c513b9ca801213f26c6f65d.png@2o.png");
    background-size: cover;
  }

  h1{
    width: 30%;
    margin: 0 auto;
    color: white;
    background: linear-gradient(-45deg, transparent 34px, #134194 0) right,
    linear-gradient(45deg, transparent 34px, #134194 0) left;
    background-size: 50% 100%;
    background-repeat: no-repeat;
    margin-bottom: 20px;
  }
  h3{
    width: 100%;
    height: 30px;
    line-height: 30px;
    margin: 0 auto;
    color: white;
    background: linear-gradient(-45deg, transparent 14px, #134194 50px) right;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    margin-bottom: 20px;
    padding-left: 20px;
    /*font-size: 20px;*/
  }
  .divTop{
    height: 50%;
    /*background-color: red;*/
    margin-bottom: 20px;
    display: flex;
  }
  .top1{
    width: 20%;
    height: 100%;
    margin-right: 30px;
    /*background-color: #7bd4ce;*/
    border: 1px solid darkgray; /* 设置 <div> 元素的边框 */
    box-shadow: 5px 5px 10px #888888; /* 设置边框阴影 */
    background: linear-gradient(to bottom right, white, blue);
  }
  .top11{
    width: 100%;
    height: 100%;
    background-color: white;
    border-radius: 50px;
    display: flex;
    margin-top: 35px;
  }
  .top111{
    width: 30%;
    height: 80px;
    border-radius: 50px 0 0 50px;
    /*background-color: red;*/
    text-align: center;
    color: white;
    line-height: 80px;
    /*font-size: 15px;*/
    background: linear-gradient(to bottom right, blue, pink);
  }
  .top112{
    width: 70%;
    height: 80px;
    border-radius: 0 50px 50px 0;
    background-color: green;
    text-align: center;
    color: white;
    line-height: 40px;
    /*font-size: 15px;*/
    background: linear-gradient(to bottom right,#666aff, #7bd4ce);
  }
  .top2{
    width: 82%;
    height: 500px;
    background-color: #caf2ff;
    border: 1px solid darkgray; /* 设置 <div> 元素的边框 */
    box-shadow: 5px 5px 10px #888888; /* 设置边框阴影 */
    /*font-size: 13px;*/
  }
  table th:nth-child(odd){
    background-color: #2bb9ba;
    color: white;
  }
  table th:nth-child(even){
    background-color:#134094;
    color: white;
  }
  table tr:nth-child(odd){
    background-color: #7bd4ce;
    color: white;
  }
  .container {
    max-width: 1500px;
    /*width: 100%;*/
    /*background-color: red;*/
    height: 350px; /* 设置容器的高度 */
    overflow: auto; /* 启用垂直滚动 */
    padding: 0;
    overflow-y: hidden;
    position: relative; /* 相对定位以容纳滚动内容 */
    /*animation: scroll 10s linear infinite; !* 使用动画滚动 *!*/
  }
  .container1{
    width: 100%;
    position: absolute; /* 绝对定位 */
    top: 0; /* 初始位置为顶部 */
    /*animation: scroll 10s linear infinite; !* 使用动画滚动 *!*/
    animation-name: scroll;
    /*animation-duration: 800s;*/
    animation-timing-function: linear;
    /*animation-delay: 1s;*/
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-fill-mode: forwards;
  }

  .container2 {
    max-width: 2500px;
    width: 100%;
    /*background-color: red;*/
    height: 180px; /* 设置容器的高度 */
    overflow: auto; /* 启用垂直滚动 */
    /*margin-left: 100px;*/
    overflow-y: hidden;
    position: relative; /* 相对定位以容纳滚动内容 */
  }
  .container21{
    width: 100%;
    position: absolute; /* 绝对定位 */
    top: 0; /* 初始位置为顶部 */
    /*animation: scroll 20s linear infinite; !* 使用动画滚动 *!*/
    animation-name: scroll;
    /*animation-duration: 800s;*/
    animation-timing-function: linear;
    /*animation-delay: 1s;*/
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-fill-mode: forwards;
  }
  /* 滚动动画 */
  @keyframes scroll {
    from {
      transform: translateY(0);
    }
    to {
      transform: translateY(-100%);
    }
  }




  .divBottom{
    height: 500px;
    /*background-color: green;*/
    /*font-size: 12px;*/
    margin-top: 10px;
  }
  .bottom1{
    width: 100%;
    height: 50%;
    margin-right: 100px;
    background-color: #caf2ff;
    border: 1px solid darkgray; /* 设置 <div> 元素的边框 */
    box-shadow: 5px 5px 10px #888888; /* 设置边框阴影 */
    margin-bottom: 10px;

  }
  .bottom2{
    width: 100%;
    height: 50%;
    background-color: #caf2ff;
    border: 1px solid darkgray; /* 设置 <div> 元素的边框 */
    box-shadow: 5px 5px 10px #888888; /* 设置边框阴影 */
  }
  .table1 tr th{
    padding: 0;
    text-align: center;
  }
  .table1 tr td{
    padding: 0;
    /*text-align: center;*/
  }
  .return{
    position: fixed;
    top: 10px;
    left:10px;
    width: 50px;
    height: 50px;
  }
</style>
<body class="body">
<div class="main" style="width: 100%;margin:0 auto;" >
  <img src="/static/img/return.png" alt="返回总控台" class="return">
  <h1 style="text-align: center ">FQC看板</h1>
  <!--    分为四块，数量一部分，当前待检任务单一部分，今日已检任务单一部分，今日不良数据一部分-->
  <div style="width: 100%;height: 100%;">
    <div class="divTop">
      <div class="top1">
        <h3>FQC段检验数量统计</h3>
        <div id="count">
        <div class="top11">
          <div class="top111">当前待检</div>
          <div class="top112">
            数量：{$data1['sumNum']} <br>
            单据数：{$data1['CodeNum']}
          </div>
        </div>
        <div class="top11">
          <div class="top111">今日已检</div>
          <div class="top112">
            数量：{$data2['sumNum']} <br>
            单据数：{$data2['CodeNum']}
          </div>
        </div>
        <div class="top11">
          <div class="top111">昨日已检</div>
          <div class="top112">
            数量：{$data3['sumNum']} <br>
            单据数：{$data3['CodeNum']}
          </div>
        </div>
        <div class="top11">
          <div class="top111">昨日不良</div>
          <div class="top112">
            数量：{$data3['NgSumNum']} <br>
            单据数：{$data3['NgCodeNum']}
          </div>
        </div>
        </div>
      </div>
      <div class="top2">
        <h3>当前待检任务单</h3>
        <!--                表头和表体分离-->
        <div style="width: 100%;margin: 0 auto;">
          <table class="table table1">
            <tr style="text-align: center;font-size: 20px">
              <th width="30px">序号</th>
              <th width="200px">检验单号</th>
              <th width="60px">是否加急</th>
              <th width="170px">物料料号</th>
              <th width="150px">物料品名</th>
              <th width="220px">供应商</th>
              <th width="100px">送检数量</th>
              <th width="150px">送检完成时间</th>
              <th width="150px">检验开始时间</th>
            </tr>
          </table>
        </div>
        <div class="container">
          <div class="container1" style="animation-duration:{$data1['sumNum']/2}s">
            <table class="table table1">
              <tbody id="table1">
              {foreach $data1['data'] as $k=>$v}
              <tr style="text-align: center">
                <td width="30px">{$k+1}</td>
                <td width="190px">{$v['DOC_NO']}</td>
                <td width="60px">{$v['IS_URGENT']}</td>
                <td width="150px">{$v['ITEM_CODE']}</td>
                <td width="150px">{$v['ITEM_NAME']}</td>
                <td width="200px">{$v['SUPPLIER_NAME']}</td>
                <td width="100px">{$v['SEND_QTY']}</td>
                <td width="150px">{$v['SEND_END_TIME']}</td>
                <td width="150px">{$v['TEST_START_TIME']}</td>
              </tr>
              {/foreach}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
    <div class="divBottom">
      <div class="bottom1">
        <h3>今日已检任务单</h3>
        <!--                表头和表体分离-->
        <div style="width: 100%;margin-top: -20px;margin-bottom: -15px">
          <table class="table table1">
            <tr style="text-align: center;font-size: 20px">
              <th width="30px">序号</th>
              <th width="200px">检验单号</th>
              <th width="60px">是否加急</th>
              <th width="170px">物料料号</th>
              <th width="150px">物料品名</th>
              <th width="220px">供应商</th>
              <th width="100px">送检数量</th>
              <th width="100px">应抽数量</th>
              <th width="100px">实抽数量</th>
              <th width="100px">不良数量</th>
              <th width="150px">送检完成时间</th>
              <th width="150px">检验开始时间</th>
            </tr>
          </table>
        </div>
        <div class="{if $data2['sumNum']>=6}container2{/if}">
          <div class="{if $data2['sumNum']>=6}container21{/if}" style="animation-duration:{$data2['sumNum']/2}s">
            <table class="table table1" style="margin: 0 auto">
              <tbody id="table2">
              {foreach $data2['data'] as $k=>$v}
              <tr style="text-align: center">
                <td width="30px">{$k+1}</td>
                <td width="190px">{$v['DOC_NO']}</td>
                <td width="60px">{$v['IS_URGENT']}</td>
                <td width="150px">{$v['ITEM_CODE']}</td>
                <td width="150px">{$v['ITEM_NAME']}</td>
                <td width="200px">{$v['SUPPLIER_NAME']}</td>
                <td width="100px">{$v['SEND_QTY']}</td>
                <td width="100px">{$v['PLAN_QTY']}</td>
                <td width="100px">{$v['REAL_QTY']}</td>
                <td width="100px">{$v['ERROR_QTY']}</td>
                <td width="150px">{$v['SEND_END_TIME']}</td>
                <td width="150px">{$v['TEST_START_TIME']}</td>
              </tr>
              {/foreach}
              </tbody>
            </table>
          </div>
        </div>
      </div>
      <div class="bottom2">
        <h3>今日不良数据</h3>
        <!--                表头和表体分离-->
        <div style="width: 100%;margin-top: -20px;margin-bottom: -15px">
          <table class="table table1">
            <tr style="text-align: center;font-size: 20px">
              <th width="30px">序号</th>
              <th width="200px">检验单号</th>
              <th width="60px">是否加急</th>
              <th width="170px">物料料号</th>
              <th width="150px">物料品名</th>
              <th width="220px">供应商</th>
              <th width="100px">送检数量</th>
              <th width="100px">应抽数量</th>
              <th width="100px">实抽数量</th>
              <th width="100px">不良数量</th>
              <th width="150px">送检完成时间</th>
              <th width="150px">检验开始时间</th>
            </tr>
          </table>
        </div>
        <div class="{if $data2['NgSumNum']>=6}container2{/if}">
          <div class="{if $data2['NgSumNum']>=6}container21{/if}" style="animation-duration:{$data2['NgSumNum']/2}s">
            <table class="table table1" style="margin: 0 auto">
              <tbody id="table3">
              {foreach $data2['NG'] as $k=>$v}
              <tr style="text-align: center">
                <td width="30px">{$k+1}</td>
                <td width="190px">{$v['DOC_NO']}</td>
                <td width="60px">{$v['IS_URGENT']}</td>
                <td width="150px">{$v['ITEM_CODE']}</td>
                <td width="150px">{$v['ITEM_NAME']}</td>
                <td width="200px">{$v['SUPPLIER_NAME']}</td>
                <td width="100px">{$v['SEND_QTY']}</td>
                <td width="100px">{$v['PLAN_QTY']}</td>
                <td width="100px">{$v['REAL_QTY']}</td>
                <td width="100px">{$v['ERROR_QTY']}</td>
                <td width="150px">{$v['SEND_END_TIME']}</td>
                <td width="150px">{$v['TEST_START_TIME']}</td>
              </tr>
              {/foreach}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

</body>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $(".return").click(function (){
    window.history.back();
  })
  //定时刷新
  // // 定义定时器，每隔一定时间执行刷新操作
  // var refreshInterval = setInterval(function() {
  //   // location.reload(); // 刷新页面
  //   $.ajax({
  //     url:'fqc',
  //     type:'get',
  //     dataType:'json',
  //     success:function (res){
  //       //异步刷新看板数据
  //       var table1=document.getElementById('table1')
  //       table1.innerHTML=''
  //       var html1=''
  //       $.each(res.data1.data,function (i,v){
  //         if(v.TEST_START_TIME==null){
  //           v.TEST_START_TIME=''
  //         }
  //         i+=1
  //         html1+='<tr style="text-align: center"><td width="30px">'+i+'</td><td width="200px">'+v.DOC_NO+'</td><td width="60px">'+v.IS_URGENT+'</td><td width="170px">'+v.ITEM_CODE+'</td><td width="150px">'+v.ITEM_NAME+'</td><td width="220px">'+v.SUPPLIER_NAME+'</td><td width="100px">'+v.SEND_QTY+'</td><td width="150px">'+v.SEND_END_TIME+'</td><td width="150px">'+v.TEST_START_TIME+'</td></tr>'
  //       })
  //       table1.innerHTML=html1
  //
  //       var table2=document.getElementById('table2')
  //       table2.innerHTML=''
  //       var html2=''
  //       $.each(res.data2.data,function (i,v){
  //         i+=1
  //         html2+='<tr style="text-align: center"><td width="30px">'+i+'</td><td width="190px">'+v.DOC_NO+'</td><td width="60px">'+v.IS_URGENT+'</td> <td width="150px">'+v.ITEM_CODE+'</td><td width="150px">'+v.ITEM_NAME+'</td><td width="200px">'+v.SUPPLIER_NAME+'</td><td width="100px">'+v.SEND_QTY+'</td><td width="100px">'+v.PLAN_QTY+'</td><td width="100px">'+v.REAL_QTY+'</td><td width="100px">'+v.ERROR_QTY+'</td><td width="150px">'+v.SEND_END_TIME+'</td><td width="150px">'+v.TEST_START_TIME+'</td></tr>'
  //       })
  //       table2.innerHTML=html2
  //
  //       var table3=document.getElementById('table3')
  //       table3.innerHTML=''
  //       var html3=''
  //       $.each(res.data2.NG,function (i,v){
  //         i+=1
  //         html3+='<tr style="text-align: center"><td width="30px">'+i+'</td><td width="190px">'+v.DOC_NO+'</td><td width="60px">'+v.IS_URGENT+'</td> <td width="150px">'+v.ITEM_CODE+'</td><td width="150px">'+v.ITEM_NAME+'</td><td width="200px">'+v.SUPPLIER_NAME+'</td><td width="100px">'+v.SEND_QTY+'</td><td width="100px">'+v.PLAN_QTY+'</td><td width="100px">'+v.REAL_QTY+'</td><td width="100px">'+v.ERROR_QTY+'</td><td width="150px">'+v.SEND_END_TIME+'</td><td width="150px">'+v.TEST_START_TIME+'</td></tr>'
  //       })
  //       table3.innerHTML=html3
  //
  //       table4=document.getElementById('count')
  //       table4.innerHTML=''
  //       var html4=''
  //       html4= '<div class="top11"><div class="top111">当前待检</div><div class="top112">数量：'+res.data1.sumNum+'<br>单据数：'+res.data1.CodeNum+'</div></div> <div class="top11"> <div class="top111">今日已检</div> <div class="top112">数量：'+res.data2.sumNum+' <br>单据数：'+res.data2.CodeNum+' </div> </div> <div class="top11"> <div class="top111">昨日已检</div> <div class="top112">数量：'+res.data3.sumNum+' <br>单据数：'+res.data3.CodeNum+'  </div> </div> <div class="top11"> <div class="top111">昨日不良</div><div class="top112">数量：'+res.data3.NgSumNum+'<br>单据数：'+res.data3.NgCodeNum+' </div></div>'
  //       table4.innerHTML=html4
  //     },
  //     error:function (){
  //       console.log('网络故障')
  //       location.reload()
  //     }
  //   })
  // }, 5000); // 5000 毫秒（5 秒）间隔
</script>
</html>